<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jquery实现轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        a,
        ul,
        li{
            list-style: none;
            text-decoration: none;
            margin: 0;
            padding: 0;
        }
        /*最终的显示框，在页面居中*/
        .wrap{
            width: 600px;
            height:600px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        /*一长串图片（所有）*/
        .navs{
            width:4200px;
            height:100%;
            position: absolute;
            top: 0;
            left:-600px;/*使第一张图片在框左边*/
           /* border:1px solid red;*/
        }
        .navs li{
            width:600px;
            height:100%;
            float: left;
        }
        .navs li img{
            width: 100%;
            height: 100%;
        }
        /*圆点的那条框*/
        #bots{
            display: inline-block;
            width: 600px;
            height: 40px;
            background: rgba(0,0,0, .3);
            text-align: center;
            position: absolute;
            /*使框紧贴底部和左侧（两侧）*/
            bottom: 0;
            left: 0;
        }
        #bots li{
            width: 20px;
            height:20px;
            border-radius: 50%;
            background-color: #cccccc;
            position: relative;
            left:220px;
            top: 10px;
            float: left;
            margin-left: 10px;
        }
        #bots .active{
            background: red;
        }
        #bots li:hover{
            cursor:pointer;
        }

    </style>
  </head>
  <body>
    <div class="wrap" id="box">
        <ul class="navs" id="navs">
            <li><a href="javascript:;"><img src="../旺仔5.jpeg"></a></li>
            <li><a href="javascript:;"><img src="../旺仔1.jpeg"></a></li>
            <li><a href="javascript:;"><img src="../旺仔2.jpeg"></a></li>
            <li><a href="javascript:;"><img src="../旺仔3.jpeg"></a></li>
            <li><a href="javascript:;"><img src="../旺仔4.jpeg"></a></li>
            <li><a href="javascript:;"><img src="../旺仔5.jpeg"></a></li>
            <li><a href="javascript:;"><img src="../旺仔1.jpeg"></a></li>
        </ul>
        <ul id="bots">
            <li class="bot active"></li>
            <li class="bot"></li>
            <li class="bot"></li>
            <li class="bot"></li>
            <li class="bot"></li>
        </ul>
    </div>
  </body>  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        let num = 1;
        let i=0;
        let timer = null;
        dsq();
        //函数封装，方便调用定时器
        function dsq(){
            timer = setInterval(()=>{
            num++;
            if(num>6/*此时第二个band1已经展示完毕，应该开始band2的展示*/){
                //同一张图片，切换时不会有感觉
                //切换到真正的band1上，开始新一轮循环
                $("#navs").css('left',-600);
                num=2;//让后面的动画执行从1到2
            }
            $("#navs").animate({left:-num*600},500);

            //实现小圆点功能
            i++;
            //i=5时，五张图已经全部轮完，要转到图1的开始
            if(i>4){
                i=0;
            }
            $("#bots li").eq(i).addClass('active');
            $("#bots li").eq(i).siblings().removeClass('active');

        },1500)
        }
       
        //鼠标移入图片，清除定时器
        $("#box").mouseenter(()=>{
            clearInterval(timer);
        });

        //鼠标移出，打开定时器
        $("#box").mouseleave(()=>{
            dsq();
        })

        //自己尝试写点击圆点时，变成相应的图片
        
    </script>
</html>